<template>
  <el-form class="template-form-add template-form form-margin--mini"
           :model="form"
           :rules="rules"
           ref="form">
    <el-form-item :label="$t('custom.reports.name')"
                  prop="name">
      <el-input :placeholder="$t('custom.mapping.enter')"
                v-model="form.name">
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('custom.reports.template_calss')"
                  prop="type">
      <el-select :placeholder="$t('custom.mapping.pleaseSelect')"
                 clearable
                 v-model="form.type">
        <el-option v-for="item in softwares"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="form.builtIn"
                   :true-label="true"
                   :false-label="false">
        {{$t('custom.accountMapping.build')}}
      </el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="form.copy"
                   :true-label="true"
                   :false-label="false">
        {{$t('custom.mapping.copyFrom')}}
      </el-checkbox>
    </el-form-item>
    <el-form-item prop="tempId"
                  v-show="form.copy">
      <el-select v-model="form.tempId"
                 :placeholder="$t('oss.qcloudRegionTips')">
        <el-option v-for="(item,index) in templates"
                   :key="index"
                   :label="item.name"
                   :value="item.id">
          <div class="flex items-center justify-between">
            <span>{{item.name}}</span>
            <BuildInTag v-if="!item.modifyFlag" />
          </div>

        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 class="template-form-add--continue template-form--btn el-button--full el-button--mt"
                 size="small"
                 :loading="loading"
                 @click="handleSave">{{ $t('continue') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { softwares } from '../account-mapping.data'
import ValidateMixin from '../mixins/validate.mixin'
import BuildInTag from './build-in-tag.vue'
import { get } from 'lodash'

export default {
  name: 'TemplateFormAdd',
  mixins: [ValidateMixin],
  components: {
    BuildInTag
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    templates: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      softwares,
      loading: false,

      form: {
        type: 1,
        builtIn: false,
        copy: false,
        name: ''
      },
      rules: {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { validator: this.limitNameLength, trigger: 'blur' },
          { validator: this.validatePass, trigger: 'blur' }
        ],
        tempId: [
          { validator: this.checkCopyFrom, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    async handleSave () {
      try {
        this.loading = true
        const value = await this.$refs.form.validate()
        if (value) {
          const { addBuiltIn } = this.$interface.mapping
          const { tempId, ...rest } = this.form
          const params = {
            id: tempId,
            ...rest
          }

          const { data: response } = await addBuiltIn(params)
          if (response.code !== 0) {
            throw get(response, 'msg', '')
          }

          this.$emit('success')
          this.$message.success(this.$t('success'))
        }
      } catch (error) {
        error && this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    resetFields () {
      this.$refs.form.resetFields()

      this.form = {
        type: 1,
        builtIn: false,
        copy: false,
        name: ''
      }
    }
  }
}
</script>
